<script setup>
import typing from "@/views/typing.vue"
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()

const show = ref([true, false, false, false])

// setTimeout(() => {
//     show.value = [false, true, false, false]
//     setTimeout(() => {
//         show.value = [false, false, true, false]
//         setTimeout(() => {
//             show.value = [false, false, false, true]
//         }, 3000)
//     }, 3000)
// }, 3000)

// 上面的效果使用循环的方式
let i = 0
onMounted(() => {
    const interval = setInterval(() => {
        if (i === 3) {
            show.value[4] = true
            // 关闭定时器
            clearInterval(interval)
            return
        }
        show.value[i] = false
        i++
        show.value[i] = true
    }, 4000)
})

const handleClick = () => {
    router.push("/gift")
}
</script>

<template>
    <typing v-if="show[0]">欢迎来到我为你量身定制的定制的抽奖系统</typing>
    <typing v-if="show[1]">你可以许下自己的愿望，并且进行抽奖</typing>
    <typing v-if="show[2]">抽中的话我可能帮你实现哦（不要太过分）</typing>
    <typing v-if="show[3]">最后跟你说一声生日快乐!，身体健康哦！</typing>
    <button @click="handleClick" v-if="show[4]">开始</button>
</template>

<style scoped>
/* 好看按钮居中 */
button {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #41b883;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1000;
}
</style>